<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>&& Gifsicle Wasm Broswer -</title>
    <link rel="shortcut icon" href="./favicon.png" />
    <meta name="description"
        content="Use workers and WebAssembly to run Gifsicle in the browser to compress, crop, manipulate frames, resize, etc. GIFs images">
    <meta name="keywords"
        content="gifsicle,gifsicle wasm,gifsicle browser,gifsicle WebAssembly,GIFs browser,compress gif,crop gif,merge gif,resize gif,extract GIFs frame">
    <meta name="author" content="https://github.com/renzhezhilu" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://renzhezhilu.github.io/gifsicle-wasm-browser" />
    <meta property="og:site_name" content="Gifsicle Wasm Broswer" />
    <meta property="og:image" itemprop="image primaryImageOfPage"
        content="https://renzhezhilu.github.io/gifsicle-wasm-browser/images/ui.jpg" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:domain" content="https://renzhezhilu.github.io/gifsicle-wasm-browser" />
    <meta name="twitter:title" property="og:title" itemprop="name" content="Gifsicle Wasm Broswer" />
    <meta name="twitter:description" property="og:description" itemprop="description"
        content="Use workers and WebAssembly to run Gifsicle in the browser to compress, crop, manipulate frames, resize, etc. GIFs images." />
   
    <!------------------------->
    <link rel="stylesheet/less" type="text/css" href="./css/index.less" />
    <script src="./js/less.js"></script>
     <!------------------------->
     <script type="module">
        import "./js/index.js";
    </script>
    <!------------------------->
    <link rel="stylesheet" href="./css/highlight.min.css">
    <script src="./js/highlight.min.js"></script>
    <script src="./js/simply-beautiful.js"></script>
    <!------------------------->
    <script>
        // let isSuppSW = 'serviceWorker' in navigator
        // let isDev = ['127.0.0.1', 'localhost'].includes(location.hostname)
        if ( 'serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js');
        }
    </script>

</head>

<body class="">
    <div id="app">
        <div>
            <input id="file" type="file" accept=".gif" multiple>
            <header>
                <nav class="flex_center2">
                    <a target="_blank" href="https://github.com/renzhezhilu/gifsicle-wasm-browser">
                        <img alt="GitHub stars"
                            src="https://img.shields.io/github/stars/renzhezhilu/gifsicle-wasm-browser?style=social">
                    </a>
                    <span>|</span>
                    <a href="https://github.com/renzhezhilu/gifsicle-wasm-browser" target="_blank">Github</a>
                    <span>|</span>
                    <a href="https://www.npmjs.com/package/gifsicle-wasm-browser" target="_blank">Npm</a>
                    <span>|</span>
                    <a href="https://github.com/renzhezhilu/gifsicle-wasm-browser#example" target="_blank">More Demo</a>
                </nav>
                <h1>Gifsicle Wasm Broswer</h1>
                <p>Use workers and WebAssembly to run Gifsicle in the browser to compress, crop, manipulate frames,
                    resize, etc. GIFs images.</p>
            </header>
            <main v-if="isLoadedPage">
                <div class="shareBox " :class="{'show':isShare,'copy':isCopyShare}">
                    <div class="w100 flex_column" @click="isShare?isCopyShare=true:notCanCopyShare();creatShare()">
                        <div class="icon flex_center2">
                            <i class="i ri:share-fill"></i>
                        </div>
                        <p>
                            Creat <br />
                            Demo Url
                        </p>
                    </div>

                    <div v-show="isCopyShare">
                        <br>
                        <a :href="shareUrl" target="_blank">
                            {{shareUrl.slice(0,70)}}...
                        </a>
                        <br>
                        <br>
                        <div class="flex_center2">
                            <button @click="copyShare" class="button size2 color mr10">
                                <i class="i ri:file-copy-fill"></i>
                                <span class="ml5">
                                    Copy
                                </span>
                            </button>
                            <button @click.stop="isCopyShare=false" class="button size2 sub">
                                <!-- Close -->
                                <i class="i ri:close-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="block step">
                    <div class="title">
                        <p>01</p>
                        <h2>Input GIFs files</h2>
                    </div>
                    <div class="con">

                        <div class="flex_center wrap fs12">
                            <div class="mr10 mb10">

                                <!-- <button @click="getRandomUrl()" class="button color size1 op5">
                                    <small>Random</small>
                                </button> -->
                                <select style="height: 26px;" class="button color size1 op6" v-model="selectedUrl" @change="getRandomUrl">
                                    <option  :value="null">Try these GIFs</option>
                                    <option v-for="(item,index) in randomUrlOut" :key="item.url" :value="index">
                                        {{item.sizeText}}
                                    </option>
                                </select>
                            </div>
                            <div class="inputUrl fs0 mb10">
                                <input v-select v-model="webUrl" placeholder="Input GIFs Url" class="" type="text" />
                                <button @click="addGif(webUrl)" class="button color size1 op5">
                                    <small>Get</small>
                                </button>
                            </div>
                        </div>

                        <div class="inputBox">
                            <div v-for="(gif,index) in input" :key="gif.id" class="gifBox">
                                <button @click="del(index,input)" class="del button ">
                                    <i class="i ri:close-line"></i>
                                </button>
                                <div class="img">
                                    <img :src="gif.url" alt="" />
                                </div>
                                <div class="info">
                                    <div v-if="!gif.isEditName" @click="gif.isEditName=true" class="name">
                                        {{gif.name}}
                                        <i class="i ri:edit-2-fill"></i>
                                    </div>
                                    <div v-else>
                                        <input v-focus-select class="edit" v-model="gif.name"
                                            @blur="gif.isEditName=false" @keyup.enter="gif.isEditName=false"
                                            type="text" />
                                    </div>
                                    <p>{{gif.width}}x{{gif.height}}</p>
                                    <p>{{gif.size}}</p>
                                    <p>{{gif.time}} / {{gif.frame}}P</p>
                                    <p>Loop: {{gif.loop}}</p>
                                    <p>Colors: {{gif.palettet}}</p>
                                </div>
                            </div>
                            <button @click="document.getElementById('file').click()" class="gifBoxInputBut button">
                                <div class="flex_column">
                                    <i class="i ri:add-line"></i>
                                    <!-- <span class="iconText">+</span> -->
                                <p class="fs14">Drop GIFs here <br> or Select</p>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="block step">
                    <div class="title">
                        <p>02</p>
                        <h2>Input commands</h2>
                    </div>
                    <div class="con">
                        <div v-for="(item,index) in command" :key="index" class="commandsBox">
                            <textarea @input="auto_grow(event)" placeholder="Input command" v-model="item.value" rows="2"></textarea>
                            <button @click="del(index,command)" class="del button ">
                                <i class="i ri:close-line"></i>
                            </button>
                        </div>
                        <div class="flex_center mt10">
                            <button @click="run()" class="button color size3 mr10 run">
                                <i class="i ri:play-fill mr5"></i>
                                Run</button>
                            <button @click="add({value:''},command)" class="button sub size3">
                                <span class="iconText">+</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="block step">
                    <div class="title">
                        <p>03</p>
                        <h2>Output</h2>

                    </div>
                    <div class="con">
                        <div class="green" v-if="outputInfo.isDone">
                            <h2 class="op8 flex_center">
                                <i class="i ri:check-line mr5"></i>
                                <span class="mr5">
                                    Done!
                                </span>
                                <span class="mr5">
                                    {{outputInfo.count}}
                                </span>
                                <span class="mr5">
                                    Gif{{outputInfo.count>1?'s':''}} take
                                </span>
                                <span class="mr5">
                                    {{outputInfo.time}}s
                                </span>
                            </h2>
                        </div>
                        <div class="red" v-if="outputInfo.isError">
                            <h2 class="op8 flex_center">
                                <i class="i ri:error-warning-line mr5"></i>
                                Error！{{outputInfo.errorInfo}}
                            </h2>
                        </div>
                        <div class="flex_between mt10" v-if="outputInfo.isDone">
                            <button @click="download()" style="max-height:36px;height:36px;" class="button  sub ">
                                <i class="i ri:download-2-line"></i>
                                <span class="ml5">Donwload</span>
                            </button>
                            <div class="flex_between">
                                <span class="mr10">
                                    Zoom:
                                </span>
                                <input type="range" v-model="outputViewZomm" min="0.1" max="2" step="0.1" name="" id="">

                            </div>
                        </div>
                        <div class="outputBox" :style="`zoom:${outputViewZomm}`">
                            <div v-for="(outGif,index) in output" class="gifBox" :class="{'w100':outGif.isTxt}">
                                <div class="w100" v-if="outGif.isTxt">
                                    <p>
                                        <b>{{outGif.name}}</b>
                                    </p>
                                    <p class="w100">
                                        <textarea :style="`height: ${outGif.text.split('\n').length*18}px;`"
                                            class="w100">
                                        {{outGif.text}}
                                    </textarea>
                                    </p>
                                </div>
                                <div v-else>
                                    <p>
                                        <b>{{outGif.name}}</b>
                                    </p>
                                    <p>
                                        <span>{{outGif.width}}x{{outGif.height}}</span>
                                        <span>{{outGif.size}}</span>
                                        <span>{{outGif.time}} / {{outGif.frame}}p </span>
                                        <span>Loop: {{outGif.loop}}</span>
                                        <span>Colors: {{outGif.palettet}}</span>
                                    </p>
                                    <img :src="outGif.url" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="block step">
                    <div class="title">
                        <p>04</p>
                        <h2>Code </h2>
                    </div>
                    <div class="con" v-if="code && outputInfo.isDone">
                        <div class="flex_between mb10" v-if="outputInfo.isDone">
                            <button @click="copyCode()" style="max-height:36px;height:36px;" class="button  sub ">
                                <i class="i ri:file-copy-line"></i>
                                <span class="ml5">Copy code</span>
                            </button>
                        </div>

                        <textarea id="code" style="height: 1px;
                        width: 1px;" v-model="code"></textarea>
                        <pre><code class="language-javascript">
{{code}}
                        </code></pre>
                    </div>
                </div>

            </main>
        </div>

    </div>
</body>


</html>